<!--
 * @Autor: 黄旗
 * @Date: 2020-07-03 17:02:29
-->
<template>
    <div class="setting-account-account">
        <h2>账号绑定</h2>
        <div class="ivu-mt ivu-pl ivu-pr">
            <Divider />
            <Row type="flex" justify="center" align="middle">
                <Col span="22">
                    <h4 class="ivu-mb-8">
                        <Avatar size="small" :src="icon.dingding" />
                        <span class="ivu-ml-8">钉钉</span>
                    </h4>
                    <p>{{  this.info.is_bind_dingtalk === 0 ? '当前未绑定钉钉账号' : '当前已绑定钉钉账号' }}</p>
                </Col>
                <Col span="2" class="ivu-text-right">
                    <a class="bind-color" @click="handleBindDing">{{ dingtalk }}</a>
                </Col>
            </Row>
        </div>
        <ding-code ref="dingModal"/>
    </div>
</template>
<script>
    import iconDingding from '@/assets/svg/icon-social-dingding.svg';
    import DingCode from '@/components/ding/dingCode'
    import { removeDingtalk } from '@api/account.js'
    import { mapState } from 'vuex';
    export default {
        components: { DingCode },
        computed: {
            ...mapState('admin/user', [
                'info'
            ])
        },
        data () {
            return {
                prompt: '当前未绑定钉钉账号',
                dingtalk: '绑定',
                icon: {
                    dingding: iconDingding
                }
            }
        },
        mounted () {
            this.dingtalk = this.info.is_bind_dingtalk === 0 ? '绑定' : '解绑'
        },
        methods: {
            handleBindDing () {
                if (this.info.is_bind_dingtalk === 0) {
                    this.$refs.dingModal.show('/home/userSetting/account')
                } else {
                    this.$Modal.confirm({
                        title: '确定解除钉钉账号的绑定？',
                        content: '确定解除钉钉账号的绑定？',
                        onOk: () => {
                            removeDingtalk().then(res => {
                            })
                            this.info.is_bind_dingtalk = 0
                            this.dingtalk = '绑定'
                            this.$Message.info('解绑成功');
                        },
                        onCancel: () => {
                            this.$Message.info('点击了取消')
                        }
                    })
                }
            }
        }
    }

</script>

<style lang="less" scoped>
    .setting-account-account{
        .bind-color {
            color: #30b862;
            cursor: pointer;
        }
    }
</style>
